<template>
	<view class="">
		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false" class="fixed">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>
		<view class="inro-card" :style="{height: swiperHeight+'px'}">
			<view v-for="(item,index) in postInfo" :key="index"
				class="flex inro-card-fill flex-direction margin-xs margin-top flex flex-direction  justify-around border-bottom bg_F7F7F7 border-radius-sm">
				<view class="basis-xll  cu-bar flex justify-between  bg-F7F7F7 align-center  radius">
					<text class="cuIcon-edit edit-icon"></text>
					<view class="basis-xl text-cut align-center  radius" @click="openFile(index)">
						<text class="text-xl text-blue  text-blod padding-lr">
							{{item.filename}}
						</text>
					</view>
					<view class="basis-xs  flex text-cut middle  radius" @click="delResume(index,0)">

						<text class="cuIcon-delete edit-icon"></text>
					</view>
				</view>

			</view>

			<view v-for="(item,index) in uploadArr" :key="index"
				class="flex inro-card-fill flex-direction margin-xs margin-top flex flex-direction  justify-around border-bottom bg_F7F7F7  border-radius-sm">

				<view class="basis-xll  cu-bar flex justify-between  bg-F7F7F7 align-center  radius">
					<text class="cuIcon-edit edit-icon"></text>
					<view class="basis-xl flex flex-direction  align-stretch padding-lr ">
						<view class="text-sm text-cut " style="padding-bottom: 10rpx;">
							{{item.msg}}
						</view>

						<view class="cu-progress radius striped active ">
							<view class="bg-cyan" :style="[{ width:item.progress+'%'}]">
								{{item.progress}}%
							</view>
						</view>

					</view>
					<view class="basis-xs  flex text-cut middle  radius" @click="delResume(index,1)">

						<text class="cuIcon-close edit-icon"></text>
					</view>
				</view>
			</view>
			<view class="middle  add-file border-radius-sm margin-top text-blue" @click="addResme">
				<text class="cuIcon-file padding-sm"></text>添加文件
			</view>

		</view>

		<view class="padding flex basis-xl flex-wrap middle" @click="sumbit">
			<button class="cu-btn lg bg-blue" style="width: 92%;">确认</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperHeight: 0,
				title: "文件打印",
				uploadArr: [],
				postInfo: [],
				info:{},
			}
		},
		onLoad(option) {
			
			
			this.info = JSON.parse(option.data);
			this.title = this.info.name;
			this.info.shop_id=option.shop_id;
		
		},
		mounted() {
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 120;
			});
		},
		methods: {
			//打开文件并预览
			openFile(index) {
				uni.openDocument({
					filePath: this.postInfo[index].path,
					success: (res) => {
						console.log("open success" + JSON.stringify(res));
					}
				})
			},
			/**
			 * 上传文件
			 */
			sumbit() {
				(this.postInfo.length > 0) ? (() => {
					uni.navigateTo({
						url:"../order/orderSub?postInfo="+JSON.stringify(this.info)
					})
				})() : (() => {
					
					uni.showToast({
						title: "请添加需要打印的文件",
						icon: "none"
					})

				})();
			},


			/**
			 *  上传
			 */
			addResme() {
				let uploadFile = (index) => { //上传文件
					let header = {
						'Content-Type': 'application/json'
					};
					let authorization = uni.getStorageSync('authorization');
					this.$set(header, 'authorization', authorization);
					this.uploadArr[index].upload = uni.uploadFile({
						url: this.apiHost + '/buyer/upFile', //
						filePath: this.uploadArr[index].path,
						name: 'files',
						header: header,
						success: (res) => {
							let dat = JSON.parse(res.data)
							this.uploadArr[index].msg = dat.msg;
							let doFile = () => {
								if (dat.code == 200) {
									let file = {
										url: dat.data.url,
										filename: this.uploadArr[index].filename,
										path:this.uploadArr[index].path,

									}
									this.uploadArr.splice(index, 1);
									this.postInfo.push(file);
									
								}
							}
							setTimeout(() => {
								doFile();
							}, 500);
						}
					});
					this.uploadArr[index].upload.onProgressUpdate((res) => {
						this.uploadArr[index].progress = res.progress;
						
					});
				}
				let createTask = () => {
					this.uploadArr.forEach((r, index) => {
						if (typeof r.progress != "undefined" && r.progress != 100) {
							uploadFile(index);
						}
					})
				}
				// #ifdef MP-WEIXIN
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						let dat = {
							filename: res.tempFiles[0].name,
							path: res.tempFiles[0].path,
							upload: {},
							msg: "上传中...",
							progress: 0,
						}
						this.uploadArr.push(dat);
						createTask();
					}
				})
				//#endif
			},


			/**
			 * 删除文件
			 */
			delResume(index, type) {
				if (type == 0)
					uni.showModal({
						title: "删除提醒",
						content: "是否删除缸垫文件？",
						success: (r) => {
							if (r.confirm) {
								this.postInfo.splice(index, 1);
								console.log(this.postInfo);
							}
						}
					})
				else
					uni.showModal({
						title: "取消提醒",
						content: "是否取消当前上传任务？",
						success: (r) => {
							if (r.confirm) {
								this.uploadArr.splice(index, 1);
							}
						}
					})

			},

		}



	}
</script>

<style scoped>
	.inro-card {
		width: 92%;
		margin: 20upx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 30upx;
		position: relative;
	}

	.cuIcon-file {
		font-size: 45rpx;
	}

	.border-radius-sm {
		border-radius: 15rpx;
	}

	.add-file {
		font-size: 32rpx;
		font-weight: 600;
		border: 2rpx dotted blue;


	}

	.bg_F7F7F7 {
		background-color: #F7F7F7;
	}

	.edit-icon {
		font-size: 45rpx;
		padding-left: 15rpx;
	}
</style>
